{% extends 'appearance/base.html' %}

{% load i18n %}
{% load static %}

{% load common_tags %}
{% load converter_tags %}

{% block title %}{{ title }}{% endblock title %}

{% block stylesheets %}
    <link href="{% static 'redactions/node_modules/cropperjs/dist/cropper.css' %}" rel="stylesheet">

    <style>
        .cropper-invisible {
            background: #000;
            opacity: 1;
        }

        .cropper-main {
            width: 100%;
        }

        .cropper-main img {
            max-width: 100%;
        }

        .cropper-modal {
            opacity: 0;
        }
    </style>
{% endblock %}

{% block content %}
    {% converter_get_object_image_data obj=content_object maximum_layer_order=layer.order|add:"-1" as object_image_data %}

    <div class="cropper-main">
        <img id="cropper-img" src="{{ object_image_data.url }}">
    </div>

    <br>
    {% with '' as title %}
        {% include 'appearance/generic_form_subtemplate.html' %}
    {% endwith %}
{% endblock content %}

{% block javascript %}
    <script>
        jQuery(document).ready(function() {
            $('.help-block').hide();
            $('label').hide();
        });

        $.getScript("{% static 'redactions/node_modules/cropperjs/dist/cropper.js' %}")
        .done(function (script, textStatus) {
            $.getScript("{% static 'redactions/node_modules/jquery-cropper/dist/jquery-cropper.js' %}")
            .done(function (script, textStatus) {
                jQuery(document).ready(function () {
                    const $image = $('#cropper-img');
                    const image = document.getElementById('cropper-img');
                    const defaultArguments = {
                        left: 10,
                        top: 10,
                        right: 10,
                        bottom: 10,
                    }
                    const initialArguments = JSON.parse(
                        $('#id_arguments').text() || JSON.stringify(defaultArguments)
                    );
                    // Create DOM new image to get the real
                    // (unscaled) image size
                    $('<img/>')
                    .attr('src', $image.attr('src'))
                    .on('load', function () {
                        const pic_real_width = this.width;
                        const pic_real_height = this.height;

                        new Cropper(
                            image, {
                            crop: function (data) {
                                const crop_left = (data.detail.x / pic_real_width * 100).toFixed(2);
                                const crop_top = (data.detail.y / pic_real_height * 100).toFixed(2);
                                const crop_right = (
                                    100.001 - (data.detail.x + data.detail.width) / pic_real_width * 100
                                ).toFixed(2);
                                const crop_bottom = (
                                    100.001 - (data.detail.y + data.detail.height) / pic_real_height * 100
                                ).toFixed(2);

                                const arguments = {
                                    'left': parseFloat(crop_left),
                                    'top': parseFloat(crop_top),
                                    'right': parseFloat(crop_right),
                                    'bottom': parseFloat(crop_bottom),
                                }

                                $('#id_arguments').text(JSON.stringify(arguments));
                            },
                            highlight: false,
                            mouseWheelZoom: false,
                            movable: false,
                            ready: function () {
                                const canvasData = this.cropper.getCanvasData();
                                const containerData = this.cropper.getContainerData();

                                this.cropper.setCropBoxData({
                                    left: initialArguments.left / 100.0 * canvasData.width + canvasData.left,
                                    top: initialArguments.top / 100.0 * canvasData.height + canvasData.top,
                                    width: (100.0 - initialArguments.right - initialArguments.left) / 100.0 * canvasData.width,
                                    height: (100.0 - initialArguments.bottom - initialArguments.top) / 100.0 * canvasData.height,
                                });
                            },
                            rotatable: false,
                            touchDragZoom: false,
                            viewMode: 1,
                            zoomable: false,
                        });
                    });
                })
            })
        });
    </script>
{% endblock %}
